<template>
  <div class="wrap">
    <p class="p1">用户管理</p>
    <div class="body">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column fixed prop="id" label="ID"> </el-table-column>
        <el-table-column prop="username" label="用户名"> </el-table-column>
        <el-table-column prop="email" label="邮箱"> </el-table-column>
        <el-table-column prop="phone" label="电话"> </el-table-column>
        <el-table-column prop="updateTime" label="注册时间">
          <template slot-scope="scope">
            <span>
              {{ new Date(scope.row.updateTime).toLocaleString() }}
            </span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="foot">
      <page
        :pageSize="pageSize"
        :total="total"
        @handleCurrentChange="handleCurrentChange"
      ></page>
    </div>
  </div>
</template>

<script>
import { getuser } from "@/utils/request.js";
import page from "@/components/page.vue";
export default {
  name: "User",
  data() {
    return {
      tableData: [],
      pageNum: 1,
      pageSize: 0,
      total: 0,
    };
  },
  created() {
    this.getlist();
  },
  methods: {
    getlist() {
      getuser(this.pageNum).then((res) => {
        // console.log(res);
        this.tableData = res.data.list;
        this.total = res.data.total;
        this.pageSize = res.data.pageSize;
      });
    },
    // 下拉菜单点击事件
    handleClick(row) {
      // console.log(row);
    },
    // 点击切换页码
    handleCurrentChange(e) {
      this.pageNum = e;
      this.getlist();
    },
  },
  components: {
    page,
  },
};
</script>

<style lang="scss" scoped>
.wrap {
  .p1 {
    text-align: left;
    font-size: 40px;
    margin: 10px 0 20px 0;
  }
   .foot{
    text-align: left;
    padding: 20px 0 50px 0;
  }
}
</style>
